<template>
	<view class="container">
		<up-alert :title="title" type = "warning" :description = "description"></up-alert>
		<view class="showImgZone">
			<image style="width: 500rpx;height: 450rpx;" src="/static/timeShow.jpg" ></image>
		</view>
		<view class="bookingZone">
			<view class="bookingFormZone">
				<up-form
						labelAlign="center"
						labelPosition="left"
						:model="bookingFrom"
						:rules="bookingRules"
						ref="bookingFormRef"
						required
				>
					<up-form-item
							label="姓名"
							labelWidth="70px"
							prop="name"
							required="true"
					>
						<up-input
								placeholder="点此输入"
								v-model="bookingFrom.name"
								border="surround"
						></up-input>
					</up-form-item>
					
					<up-form-item
							label="性别"
							labelWidth="70px"
							prop="gender"
							required="true"
					>
						<up-radio-group 
							v-model="bookingFrom.gender"
							placement="row">
							<up-radio label="男" name="0"></up-radio>
							<up-radio label="女" name="1"></up-radio>
						</up-radio-group>
					</up-form-item>
					
					<up-form-item
							label="年龄"
							labelWidth="70px"
							prop="age"
							required="true"
					>
						<up-input
								placeholder="点此输入"
								v-model="bookingFrom.age"
								border="surround"
						></up-input>
					</up-form-item>
					
					<up-form-item
							@click="showDatePicker"
							label="来诊时间"
							labelWidth="70px"
							prop="appointmentTime"
							required="true"
					>
						<up-datetime-picker
									disabled="true"
									hasInput
									:show="dateTimeShow"
									v-model="bookingFrom.appointmentTime"
									mode="datetime"
									@confirm="confirm"
									@cancel="cancel"
						></up-datetime-picker>					
					</up-form-item>
					
					<up-form-item
							label="手机号"
							labelWidth="70px"
							prop="phoneNumber"
							required="true"
					>
						<up-input
								placeholder="点此输入"
								v-model="bookingFrom.phoneNumber"
								border="surround"
						></up-input>
					</up-form-item>
					<up-form-item
							label="备注"
							labelWidth="70px"
							prop="message"
					>
						<up-textarea v-model="bookingFrom.message" placeholder="点此输入" maxlength="50" count ></up-textarea>
					</up-form-item>
				</up-form>
			</view>
			<view class="btnZone">
				<up-button @click="onSubmit" type="success" text="提交"></up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref,watch } from 'vue';
	import { useCustomerStore } from '@/stores/customer.js'
	import { bookingSaveInfoService,bookingUpdateInfoService } from '@/api/booking.js'
	import { onLoad } from "@dcloudio/uni-app"
	
	const customerStore = useCustomerStore();
	const title = ref('所填写的个人信息均不公开，请放心填写~');
	const bookingFormRef = ref();//预约表单标识
	const isUpdate = ref(false);//是否修改标识
    //--------------预约表单------------
    const bookingFrom = ref({
		bookingId: '',
        name: '',
        gender: '0',
        age: '',
        appointmentTime: Date.now(), //Date.now()
        phoneNumber: '',
        message: '',
        customerId: ''
    })
	const dateTimeShow = ref(false);//控制日期选择框的打开
	
	//---------预约表单校验规则----------
	const bookingRules = ref({
		'name': {
			type: 'string',
			required: true,
			message: '请填写姓名',
			trigger: ['blur','change']
		},
		'gender': {
			type: 'string',
			required: true,
			message: '请选择性别',
			trigger: ['blur','change']
		},
		'age': [
			{
				type: 'string',
				required: true,
				message: '请填写年龄',
				trigger: ['blur','change']
			},
			{
			    pattern: /^[1-9][0-9]*$/,
			    // 正则检验前先将值转为字符串
			    transform(value) {
			        return String(value);
			    },
			    message: '请输入大于等于1的正整数',
				trigger: ['blur','change']
			}
		],
		'phoneNumber': [
			{
				type: 'string',
				required: true,
				message: '请填写号码',
				trigger: ['blur','change']
			},
			{
				pattern: /^1[3456789]\d{9}$/,
				// 正则检验前先将值转为字符串
				transform(value) {
				    return String(value);
				},
				message: '请输入有效的手机号码',
				trigger: ['blur','change']
			},
		]
		// 'appointmentTime': {
		// 	required: true,
		// 	message: '请填写来诊日期',
		// 	trigger: ['blur','change']
		// }
	})
	
	// 还原表单信息
	const resetBookingForm = () => {
		bookingFrom.value = {
			bookingId: '',
		    name: '',
		    gender: '0',
		    age: '',
		    appointmentTime: Date.now(), //Date.now()
		    phoneNumber: '',
		    message: '',
		    customerId: ''
		}
	}
	
	const confirm = (res) => {
		console.log(res);
		dateTimeShow.value = false;
	}
	
	const cancel = () => {
		dateTimeShow.value = false;
	}
	
	const showDatePicker = () => {
		dateTimeShow.value = true;
	}
	
	// 提交预约
	const onSubmit = async() => { 
		await bookingFormRef.value.validate();// 校验表单
		
		if(isUpdate.value){
			const res = await bookingUpdateInfoService(bookingFrom.value);
			console.log("修改响应结果Res===>",res);
			if(res.data.code === 200){
				//清空预约表单
				resetBookingForm();
				uni.showToast({
					title: '修改信息成功!',
					icon: 'success'
				})
			}else {
				// 提示异常
				uni.showToast({
					title: res.data.msg,
					icon: 'error'
				})
			}
		}else{
			//先设置当前提交订单的用户ID
			bookingFrom.value.customerId = customerStore.customer.customerId;
			
			const res = await bookingSaveInfoService(bookingFrom.value);
			console.log("预约响应结果Res===>",res);
			if(res.data.code === 200){
				//清空预约表单
				resetBookingForm();
				uni.showToast({
					title: '预约成功!',
					icon: 'success'
				})
			}else {
				// 提示异常
				uni.showToast({
					title: res.data.msg,
					icon: 'error'
				})
			}
		}
	}
	onLoad((options)=>{
		if(options.updateData){
			isUpdate.value = true;
			console.log("options.updateData====>",options.updateData);
			let updateData = JSON.parse(options.updateData);
			bookingFrom.value.bookingId = updateData.bookingId;
			bookingFrom.value.name = updateData.name;
			bookingFrom.value.gender = updateData.gender;
			bookingFrom.value.age = updateData.age;
			bookingFrom.value.appointmentTime = new Date(updateData.appointmentTime.replace(/-/g, '/')).getTime();
			bookingFrom.value.phoneNumber = updateData.phoneNumber;
			bookingFrom.value.message = updateData.message;
			bookingFrom.value.customerId = updateData.customerId;
		}
	})
	
</script>

<style lang="scss">
.showImgZone{
	height: 500rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.bookingZone{
	padding: 30rpx;
	:deep(.u-input){
		background-color: #fff;
		width: 90%;
	}
	
	.bookingFormZone{
		margin-bottom: 50px;
	}
	
	.btnZone{
		    position: fixed;
		    left: 0;
		    bottom: 10px; /* 设置你想要的距离 */
		    width: 100%;
		    z-index: 1000; /* 确保该元素在其他内容之上 */
	}
}
</style>
